<!--
 * @Author: error: git config user.name & please set dead value or install git
 * @Date: 2023-12-11 20:13:54
 * @LastEditors: error: git config user.name & please set dead value or install git
 * @LastEditTime: 2023-12-12 09:41:00
 * @FilePath: /magic-poetry-main/src/components/BlockCard.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by 深木, All Rights Reserved. 
-->
<template>
  <div class="content-section">
    <div class="apps-card">
      <div class="item-apps-card">
        <div class="app-card d-flex" v-for="item in products" :key="item.id">
          <img :src="item.image" />
          <div class="app-card__left">
            <div class="name">{{ item.name }}</div>
            <div class="bottom d-flex">
              <div>{{ item.num }}词</div>
              <div class="add-tab" v-if="item.status">
                <van-icon name="plus" /> <span class="color-b">添加</span>
              </div>
              <div class="add-tab" v-else>
                <span class="color-r">删除</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  products: {
    type: Array,
  },
});
</script>

<style lang="scss" scoped>
.content-section {
  display: flex;
  flex-direction: column;

  &-title {
    color: #1e1e1f;
    margin-bottom: 14px;
  }

  .apps-card {
    width: 100%;

    .item-apps-card {
      display: flex;
      flex-wrap: wrap;
      margin-right: -20px;
    }
    .app-card {
      width: calc(33.3333333% - 20px);
      margin-right: 20px;
      border-radius: 14px;
      padding-bottom: 16px;
      cursor: pointer;
      transition: 0.3s ease;
      img {
        width: 54px;
        height: 71px;
      }
      &__left {
        font-size: 16px;
        .name {
          margin-bottom: 8px;
        }
        .bottom {
          font-size: 14px;
        }
      }
      .add-tab {
        margin-left: auto;
      }

      @media screen and (max-width: 1110px) {
        width: calc(50% - 20px);
        &:last-child {
          //margin-top: 20px;
          margin-left: 0px;
        }
      }
      @media screen and (max-width: 565px) {
        width: calc(100% - 20px);
        & + .app-card {
          margin-left: 0;
        }
      }
    }
  }
}
</style>